---
id: scroll-area
title: Scroll Area
description: A custom scrollable area component with styled scrollbars.
---

<ComponentPreview id="ScrollArea" />

## Features

- Cross-browser custom scrollbars
- Native scroll behavior
- Keyboard navigation support
- Touch and mouse support
- Horizontal and vertical scrolling
- Support for nested scroll areas
- Customizable scrollbar appearance

## Anatomy

To set up the scroll area correctly, it's essential to understand its anatomy and the naming of its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="scroll-area" />

## Required style

It's important to note that the scroll area requires the following styles on the `ScrollArea.Viewport` element to hide
the native scrollbar:

```css
[data-scope='scroll-area'][data-part='viewport'] {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}
```

## Examples

### Basic Usage

Create a basic scrollable area with custom scrollbar.

<Example id="basic" />

### Horizontal Scrolling

Configure the scroll area for horizontal scrolling only.

<Example id="horizontal" />

### Both Directions

Enable scrolling in both horizontal and vertical directions.

<Example id="both-directions" />

### Nested Scroll Areas

Scroll areas can be nested within each other for complex layouts.

<Example id="nested" />

## API Reference

### Props

<ComponentTypes id="scroll-area" />

### Context

These are the properties available when using `ScrollArea.Context`, `useScrollAreaContext` hook or `useScrollArea` hook.

<ContextType id="scroll-area" />
